<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myBorderBottom">
      <el-col :span="7" class="myTitleText myLineHeight_40px">
        {{title}}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span style="font-size: 12px"><!-- 金额合计:XXXX --></span>
      </el-col>
      <el-col :span="17" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="add">新增</el-button>
        <!-- <el-dropdown split-button type="primary" @command="handleCommand">
          导入/导出
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="下载导入模板">下载导入模板</el-dropdown-item>
            <el-dropdown-item command="批量导入资产数据">批量导入资产数据</el-dropdown-item>
            <el-dropdown-item command="导出资产数据">导出资产数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="6">
        <template>
          <el-cascader
            placeholder="全部项目/小区"
            :options="regionOptions"
            v-model="regionOptSelected">
          </el-cascader>
        </template>
      </el-col>
      <el-col :span="4">
        <template>
          <el-select v-model="assetStatusSelected"
            clearable
            placeholder="全部资产状态">
            <el-option
              v-for="item in assetStatus"
              :key="item.label"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请输入关键词" v-model="kw"></el-input>
      </el-col>
      <el-col :span="10">
        <el-button type="primary" @click="search">查询</el-button>
        <el-dropdown split-button type="primary" @command="handleCommand">
          处理
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="资产领用" :disabled="collarBtn">资产领用</el-dropdown-item>
            <el-dropdown-item command="资产退库" :disabled="retiringBtn">资产退库</el-dropdown-item>
            <el-dropdown-item command="资产借用" :disabled="borrowBtn">资产借用</el-dropdown-item>
            <el-dropdown-item command="资产归还" :disabled="returnBtn">资产归还</el-dropdown-item>
            <el-dropdown-item command="资产调拨" :disabled="allocationBtn">资产调拨</el-dropdown-item>
            <el-dropdown-item command="信息变更" :disabled="updateBtn">信息变更</el-dropdown-item>
            <el-dropdown-item command="维修登记" :disabled="repairBtn">维修登记</el-dropdown-item>
            <el-dropdown-item command="清理报废" :disabled="clearBtn">清理报废</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" :disabled="copyBtn" @click="copy">复制</el-button>
        <el-dropdown 
          split-button 
          type="primary" 
          @command="handleCommand">
          打印
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="打印资产标签" :disabled="printBtn">打印资产标签</el-dropdown-item>
            <el-dropdown-item command="打印资产卡片" :disabled=true>打印资产卡片</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-button type="primary">查看处理记录</el-button> -->
      </el-col>
    </el-row>
    
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <template>
          <el-table
            border
            :data="list"
            :stripe = true
            v-loading="loading"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="状态">
              <template scope="scope">
                {{scope.row.property_status | property_status}}
              </template>
            </el-table-column>
            <el-table-column
              label="照片">
              <template scope="scope">
                <a v-for="i in scope.row.arr_url" :href='QINIU_API + i.att_url' target="_blank">
                  <img :src="QINIU_API + i.att_url" width="40" height="40" />
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="资产类别"
              prop="cate_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="存放位置"
              prop="property_loc">
            </el-table-column>
            <el-table-column
              label="使用部门"
              prop="dept_name">
            </el-table-column>
            <el-table-column
              label="使用人"
              prop="user_name">
            </el-table-column>
            <el-table-column
              label="质保状态">
              <template scope="scope">
                {{scope.row.out_warranty | out_warranty}}
              </template>
            </el-table-column>
            <el-table-column
              label="创建人"
              prop="creator_name">
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="create_time">
            </el-table-column>
            <el-table-column
              label="功能操作"
              width="80">
              <template scope="scope">
                <el-button class="look" type="text" size="small" @click="info(scope.row.property_id)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    
    <div class="block">                    
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page_num"
        :page-sizes="[10]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    

    <!-- 维修信息弹出框 start -->
    <el-dialog title="维修信息登记" :visible.sync="RepairDig" :before-close="handleClose" class="mydlg">

      <el-dialog title="选择报修人" class="myRoleDialog" :visible.sync="newRoleDialogVisible" append-to-body>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-input placeholder="输入关键词" v-model="kw_p"></el-input>
          </el-col>
          <el-col :span="4" class="myTextAlignRight">
            <el-button type="primary" class="myBgGreen" @click="onSearch">查询</el-button>
          </el-col>
        </el-row>
        <div class="mymarginTop_10px">
          <el-tree
            class="myOV_y_400px" 
            ref="dutyDlg"
            v-loading="dutyDlgListLoading"
            :data="dutyDlgList"
            :props="dutyDlgProps"
            node-key="staff_id"
            @check-change="onChange"
            :render-content="renderContent"
            show-checkbox>
          </el-tree>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="newRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" class="myBgGreen" @click="onAssignSub">确 定</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-col :span="24">
          <table class="RepairDigTab">
            <tr>
              <td>维修单号</td>
              <td>
                <el-input placeholder="维修单号" v-model="repair_order"></el-input>
              </td>
              <td>业务日期</td>
              <td>
                <el-date-picker
                  v-model="repair_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="业务日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td>处理人</td>
              <td>
                <el-input placeholder="处理人" v-model="repair_handler" readonly></el-input>
              </td>
              <td>维修花费</td>
              <td>
                <el-input placeholder="维修花费" v-model="repair_cost"></el-input>
              </td>
            </tr>
            <tr>
              <td>状态</td>
              <td>
                <template>
                  <el-select v-model="repair_status" placeholder="状态">
                    <el-option
                      v-for="item in repairStateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </td>
              <td>报修人</td>
              <td>
                <el-input placeholder="报修人" v-model="repair_user" @focus="showRepairDig"></el-input>
              </td>
            </tr>
            <tr>
              <td>维修内容</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="维修内容" v-model="repair_content"></el-input>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="备注" v-model="repair_note"></el-input>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <template>
          <el-table
            border
            :data="list_wx"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              label="照片">
              <template scope="scope">
                <a v-for="i in scope.row.arr_url" :href='QINIU_API + i.att_url' target="_blank">
                  <img :src="QINIU_API + i.att_url" width="40" height="40" />
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="资产类别"
              prop="cate_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="存放位置"
              prop="property_loc">
            </el-table-column>
            <el-table-column
              label="使用部门"
              prop="dept_name">
            </el-table-column>
            <el-table-column
              label="使用人"
              prop="user_name">
            </el-table-column>
            <el-table-column
              label="质保状态">
              <template scope="scope">
                {{scope.row.out_warranty | out_warranty}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onaddRepair">提 交</el-button>
        <el-button @click="RepairDig = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 维修信息弹出框 end -->

    <!-- 资产借用弹出框 start -->
    <el-dialog title="资产借用" :visible.sync="BorrowDig" :before-close="handleClose" class="mydlg">

      <el-dialog title="选择借用人" class="myRoleDialog" :visible.sync="newBorrowDialogVisible" append-to-body>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-input placeholder="输入关键词" v-model="kw_p"></el-input>
          </el-col>
          <el-col :span="4" class="myTextAlignRight">
            <el-button type="primary" class="myBgGreen" @click="onSearch">查询</el-button>
          </el-col>
        </el-row>
        <div class="mymarginTop_10px">
          <el-tree
            class="myOV_y_400px" 
            ref="dutyDlg"
            v-loading="dutyDlgListLoading"
            :data="dutyDlgList"
            :props="dutyDlgProps"
            node-key="staff_id"
            @check-change="onChange"
            :render-content="renderContent"
            show-checkbox>
          </el-tree>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="newBorrowDialogVisible = false">取 消</el-button>
          <el-button type="primary" class="myBgGreen" @click="onBorrowAssignSub">确 定</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-col :span="24">
          <table class="RepairDigTab">
            <tr>
              <td>借用单号</td>
              <td>
                <el-input placeholder="借用单号" v-model="borrow_order"></el-input>
              </td>
              <td>借出日期</td>
              <td>
                <el-date-picker
                  v-model="borrow_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="借出日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td>借用人</td>
              <td>
                <el-input placeholder="借用人" v-model="borrow_user"  @focus="showBorrowDig"></el-input>
              </td>
              <td>预计归还日期</td>
              <td>
                <el-date-picker
                  v-model="return_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="预计归还日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="备注" v-model="borrow_note"></el-input>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <template>
          <el-table
            border
            :data="list_wx"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              label="照片">
              <template scope="scope">
                <a v-for="i in scope.row.arr_url" :href='QINIU_API + i.att_url' target="_blank">
                  <img :src="QINIU_API + i.att_url" width="40" height="40" />
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="资产类别"
              prop="cate_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="存放位置"
              prop="property_loc">
            </el-table-column>
            <el-table-column
              label="使用部门"
              prop="dept_name">
            </el-table-column>
            <el-table-column
              label="使用人"
              prop="user_name">
            </el-table-column>
            <el-table-column
              label="质保状态">
              <template scope="scope">
                {{scope.row.out_warranty | out_warranty}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onaddBorrow">提 交</el-button>
        <el-button @click="BorrowDig = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 资产借用弹出框 end -->

    <!-- 资产归还弹出框 start -->
    <el-dialog title="资产归还" class="myRoleDialog" :visible.sync="returnDig">
      <el-row :gutter="10">
        <el-col :span="6" class="myLeftMsg">
          实际归还日期:
        </el-col>
        <el-col :span="18">
          <el-date-picker
            v-model="return_return_time"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="实际归还日期">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="mymarginTop_10px">
        <el-col :span="6" class="myLeftMsg">
          归还备注:
        </el-col>
        <el-col :span="18">
          <el-input type="textarea" placeholder="归还备注" v-model="return_note"></el-input>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="onaddReturn">提 交</el-button>
        <el-button @click="returnDig = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 资产归还弹出框 end -->

    <!-- 资产领用弹出框 start -->
    <el-dialog title="资产领用" :visible.sync="collarDig" :before-close="handleClose" class="mydlg">
      
      <el-dialog title="选择部门" class="myRoleDialog" :visible.sync="deptDialogVisible" append-to-body>
        <el-menu class="myOV_y_400px zcgl"
          v-loading="deptLoading"
          :default-active="deptSelected"
          @open="handleDeptSelect"
          @close="handleDeptSelect"
          @select="handleDeptSelect">
            <dept-sub-menu :subMenu='deptList'></dept-sub-menu>
         </el-menu>
        <div slot="footer" class="dialog-footer">
          <el-button @click="deptDialogVisible = false">取 消</el-button>
          <el-button type="primary" class="myBgGreen" @click="handleDeptDlgClick" >确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="选择领用人" class="myRoleDialog" :visible.sync="newCollarDialogVisible" append-to-body>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-input placeholder="输入关键词" v-model="kw_p"></el-input>
          </el-col>
          <el-col :span="4" class="myTextAlignRight">
            <el-button type="primary" class="myBgGreen" @click="onSearch">查询</el-button>
          </el-col>
        </el-row>
        <div class="mymarginTop_10px">
          <el-tree
            class="myOV_y_400px" 
            ref="dutyDlg"
            v-loading="dutyDlgListLoading"
            :data="dutyDlgList"
            :props="dutyDlgProps"
            node-key="staff_id"
            @check-change="onChange"
            :render-content="renderContent"
            show-checkbox>
          </el-tree>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="newCollarDialogVisible = false">取 消</el-button>
          <el-button type="primary" class="myBgGreen" @click="onCollarAssignSub">确 定</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-col :span="24">
          <table class="RepairDigTab">
            <tr>
              <td>领用单号</td>
              <td>
                <el-input placeholder="领用单号" v-model="collar_order"></el-input>
              </td>
              <td>领用日期</td>
              <td>
                <el-date-picker
                  v-model="collar_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="领用日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td>领用部门</td>
              <td>
                <el-input placeholder="领用部门" v-model="collar_department" @focus="showDeptDig"></el-input>
              </td>
              <td>领用人</td>
              <td>
                <el-input placeholder="领用人" v-model="collar_user" @focus="showCollarDig"></el-input>
              </td>
            </tr>
            <tr>
              <td>存放地址</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="存放地址" v-model="collar_content"></el-input>
              </td>
            </tr>
            <tr>
              <td>领用备注</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="领用备注" v-model="collar_note"></el-input>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <template>
          <el-table
            border
            :data="list_wx"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              label="照片">
              <template scope="scope">
                <a v-for="i in scope.row.arr_url" :href='QINIU_API + i.att_url' target="_blank">
                  <img :src="QINIU_API + i.att_url" width="40" height="40" />
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="资产类别"
              prop="cate_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="存放位置"
              prop="property_loc">
            </el-table-column>
            <el-table-column
              label="使用部门"
              prop="dept_name">
            </el-table-column>
            <el-table-column
              label="使用人"
              prop="user_name">
            </el-table-column>
            <el-table-column
              label="质保状态">
              <template scope="scope">
                {{scope.row.out_warranty | out_warranty}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onaddCollar">提 交</el-button>
        <el-button @click="collarDig = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 资产领用弹出框 end -->
    
    <!-- 资产退库弹出框 start -->
    <el-dialog title="资产退库" :visible.sync="retiringDig" :before-close="handleClose" class="mydlg">
      <el-row>
        <el-col :span="24">
          <table class="RepairDigTab">
            <tr>
              <td>退库单号</td>
              <td>
                <el-input placeholder="退库单号" v-model="retiring_order"></el-input>
              </td>
              <td>退库日期</td>
              <td>
                <el-date-picker
                  v-model="retiring_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="退库日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td>存放地址</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="存放地址" v-model="retiring_content"></el-input>
              </td>
            </tr>
            <tr>
              <td>退库备注</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="退库备注" v-model="retiring_note"></el-input>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <template>
          <el-table
            border
            :data="list_wx"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              label="照片">
              <template scope="scope">
                <a v-for="i in scope.row.arr_url" :href='QINIU_API + i.att_url' target="_blank">
                  <img :src="QINIU_API + i.att_url" width="40" height="40" />
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="资产类别"
              prop="cate_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="存放位置"
              prop="property_loc">
            </el-table-column>
            <el-table-column
              label="使用部门"
              prop="dept_name">
            </el-table-column>
            <el-table-column
              label="使用人"
              prop="user_name">
            </el-table-column>
            <el-table-column
              label="质保状态">
              <template scope="scope">
                {{scope.row.out_warranty | out_warranty}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onaddRetiring">提 交</el-button>
        <el-button @click="retiringDig = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 资产退库弹出框 end -->

    <!-- 清理报废弹出框 start -->
    <el-dialog title="清理报废" :visible.sync="clearDig" :before-close="handleClose" class="mydlg">
      <el-row>
        <el-col :span="24">
          <table class="RepairDigTab">
            <tr>
              <td>清理单号</td>
              <td>
                <el-input placeholder="清理单号" v-model="clear_order"></el-input>
              </td>
              <td>清理日期</td>
              <td>
                <el-date-picker
                  v-model="clear_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="清理日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td>清理人</td>
              <td>
                <el-input placeholder="清理人" v-model="repair_handler" readonly></el-input>
              </td>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td>清理说明</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="清理说明" v-model="clear_note"></el-input>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <template>
          <el-table
            border
            :data="list_wx"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              label="照片">
              <template scope="scope">
                <a v-for="i in scope.row.arr_url" :href='QINIU_API + i.att_url' target="_blank">
                  <img :src="QINIU_API + i.att_url" width="40" height="40" />
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="资产类别"
              prop="cate_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="存放位置"
              prop="property_loc">
            </el-table-column>
            <el-table-column
              label="使用部门"
              prop="dept_name">
            </el-table-column>
            <el-table-column
              label="使用人"
              prop="user_name">
            </el-table-column>
            <el-table-column
              label="质保状态">
              <template scope="scope">
                {{scope.row.out_warranty | out_warranty}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onaddClear">提 交</el-button>
        <el-button @click="clearDig = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 清理报废弹出框 end -->

    <!-- 资产调拨弹出框 start -->
    <el-dialog title="资产调拨" :visible.sync="allocationDig" :before-close="handleClose" class="mydlg">
      <el-row>
        <el-col :span="24">
          <table class="RepairDigTab">
            <tr>
              <td>调拨单号</td>
              <td>
                <el-input placeholder="调拨单号" v-model="allocation_order"></el-input>
              </td>
              <td>调出日期</td>
              <td>
                <el-date-picker
                  v-model="allocation_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="调出日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td>调出区域</td>
              <td v-if="multipleSelection.length==1" style="text-align: left; padding-left:15px; box-sizing: border-box;">
                {{multipleSelection[0].area_name}}
              </td>
              <td>调出管理员</td>
              <td v-if="multipleSelection.length==1">
                <el-input placeholder="调出管理员" v-model="multipleSelection[0].admin_name" readonly></el-input>
              </td>
            </tr>
            <tr>
              <td>调入区域</td>
              <td>
                <template>
                  <el-cascader
                    placeholder="调入区域"
                    :options="regionOptions"
                    v-model="regionOptSelected_zc">
                  </el-cascader>
                </template>
              </td>
              <td>调入管理员</td>
              <td>
                <template>
                  <el-select v-model="allocation_admin_name" placeholder="调入管理员">
                    <el-option
                      v-for="item in admin_options"
                      :key="item.admin_id"
                      :label="item.admin_name"
                      :value="item.admin_id+'-'+item.admin_name">
                    </el-option>
                  </el-select>
                </template>
              </td>
            </tr>
            <tr>
              <td>调出说明</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="调出说明" v-model="allocation_note"></el-input>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <template>
          <el-table
            border
            :data="list_wx"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              label="照片">
              <template scope="scope">
                <a v-for="i in scope.row.arr_url" :href='QINIU_API + i.att_url' target="_blank">
                  <img :src="QINIU_API + i.att_url" width="40" height="40" />
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="资产类别"
              prop="cate_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="存放位置"
              prop="property_loc">
            </el-table-column>
            <el-table-column
              label="使用部门"
              prop="dept_name">
            </el-table-column>
            <el-table-column
              label="使用人"
              prop="user_name">
            </el-table-column>
            <el-table-column
              label="质保状态">
              <template scope="scope">
                {{scope.row.out_warranty | out_warranty}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onaddAllocation">提 交</el-button>
        <el-button @click="allocationDig = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 资产调拨弹出框 end -->

    <!-- 标签打印的模板 start -->
    <el-row :gutter="10" v-if="show" id="print">
      <el-col :span="col" class="label" v-if="tag_used==1" v-for="(i,index) in multipleSelection">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text">资产名称：{{i.property_name}}</div>
          <div class="text">购入时间：{{i.bought_time}}</div>
          <div class="text"></div>
          <div class="barbox">
            <canvas :id="'barcode'+index"></canvas>
          </div>
        </el-card>
      </el-col>
      <el-col :span="col" class="label" v-if="tag_used==2" v-for="(i,index) in multipleSelection">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text">资产名称：{{i.property_name}}</div>
          <div class="text"></div>
          <div class="text"></div>
          <div class="barbox">
            <canvas :id="'barcode'+index"></canvas>
          </div>
        </el-card>
      </el-col>
      <el-col :span="col" class="label" v-if="tag_used==3" v-for="(i,index) in multipleSelection">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text"></div>
          <div class="text"></div>
          <div class="text"></div>
          <div class="barbox">
            <canvas :id="'barcode'+index"></canvas>
          </div>
        </el-card>
      </el-col>
      <el-col :span="col" class="label" v-if="tag_used==4" v-for="(i,index) in multipleSelection">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text">资产名称：{{i.property_name}}</div>
          <div class="text">规格型号：{{i.property_spec}}</div>
          <div class="text"></div>
          <div class="barbox">
            <canvas :id="'barcode'+index"></canvas>
          </div>
        </el-card>
      </el-col>
      <el-col :span="col" class="label" v-if="tag_used==5" v-for="(i,index) in multipleSelection">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="text">资产名称：{{i.property_name}}</div>
          <div class="text">使用人：{{i.user_name}}</div>
          <div class="text">购入时间：{{i.bought_time}}</div>
          <div class="barbox">
            <canvas :id="'barcode'+index"></canvas>
          </div>
        </el-card>
      </el-col>
      <el-col :span="col" class="label" v-if="tag_used==6" v-for="(i,index) in multipleSelection">
        <el-card :body-style="cardBody" :style="{'width':cardBox,'margin':'0 auto'}">
          <div class="barbox" :id="'qrcode'+index"></div>
          <div style="text-align: center; font-size: 14px; font-weight: 600">{{i.property_code}}</div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 标签打印的模板 end -->

  </div>
</template>     
  
<style scoped>
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myred{
    color: #f00;
    font-size: 12px;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
  }
  .RepairDigTab{
    width: 100%;
    border: 1px solid #e6ebf5;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
  }
  .RepairDigTab tr,.RepairDigTab td{
    border: 1px solid #e6ebf5;
  }
  .RepairDigTab td{
    width: 25%;
    height: 40px;
  }
  .label{
    margin-bottom: 10px;
  }
  .label div.text{
    font-size: 12px;
    height: 15px;
    line-height: 15px;
  }
  .label div.barbox{
    text-align: center;
  }
  #print{
    width:592px; 
    margin:0 auto; 
    padding-top: 10px;
    position: fixed;
    top: -10000px;
  }
  .myOV_y_400px{
    max-height: 400px;
    min-height: 200px;
    overflow-y:scroll;
    border:1px solid #f2f2f2;
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
</style>

<script>
  import { extractAreaIds } from '@/utils/misc';
  import { getRegion } from '@/utils/localstorage';
  import { getTemplate , getAssetsList , addAssets , addRepair , getAdminForArea , lendAsset , backAsset , inAsset , outAsset , transferAsset , invalidAsset } from '@/api/assets';
  import JsBarcode from "jsbarcode";
  import QRCode from 'qrcodejs2';
  import { QINIU_API } from '@/config/baseUrl';
  import { getStaffList } from '@/api/staff';
  import DeptSubMenu from '@/components/DeptSubMenu';
  import { getDeptInfo } from '@/api/dept';
  export default {
    data(){
      return{
        title:"资产入库",
        QINIU_API:QINIU_API,
        page_num:1,
        page_size:10,
        total:null,
        list:[],
        list_wx:[],
        loading:false,
        regionOptions: [],
        regionOptSelected: [],
        RepairDig:false,
        repair_time:"",
        repair_status:"",
        repairStateOptions:[
          { label:"维修中", value:0},
          { label:"已完成", value:1}
        ],
        multipleSelection:[],
        kw:"",

        show:false,
        col:12,
        tag_used:"",
        cardBody:{ padding: '14px' , height: '150px' , background: '#f5f7fa'},
        cardBox:"",
        ptype:"",
        pheight:"",
        tag_used:"",
        pwidth:"",
        printBtn:true,
        updateBtn:true,
        copyBtn:true,
        repairBtn:true,
        repair_order:"",
        repair_handler:"",
        repair_handler_id:"",
        repair_user:"",
        repair_user_id:"",
        repair_cost:"",
        repair_content:"",
        repair_note:"",

        newRoleDialogVisible:false,

        dutyDlgList:[],
        dutyDlgProps: {
          children: 'children',
          label: 'user_name'
        },
        dutyDlgListLoading:false,

        BorrowDig:false,
        kw_p:"",

        borrowBtn:true,
        newBorrowDialogVisible:false,
        borrow_time:"",
        borrow_order:"",
        borrow_user:"",
        borrow_user_id:"",
        borrow_note:"",
        return_time:"",

        returnBtn:true,
        returnDig:false,
        return_return_time:"",
        return_note:"",

        collarBtn:true,
        newCollarDialogVisible:false,
        collarDig:false,
        collar_user:"",
        collar_user_id:"",
        collar_order:"",
        collar_time:"",
        collar_department:"",
        collar_content:"",
        collar_note:"",
        deptDialogVisible:false,
        dept_info:[],
        deptLoading:false,
        deptSelected: null,
        deptList:[],

        retiringBtn:true,
        retiringDig:false,
        retiring_order:"",
        retiring_time:"",
        retiring_content:"",
        retiring_note:"",

        clearBtn:true,
        clearDig:false,
        clear_order:"",
        clear_time:"",
        clear_note:"",

        allocationBtn:true,
        allocationDig:false,
        regionOptSelected_zc:[],
        admin_options:[],
        allocation_admin_name:"",
        allocation_time:"",
        allocation_note:"",
        allocation_order:"",

        assetStatusSelected:"",
        assetStatus:[
          {label:"闲置中",value:"0"},
          {label:"在用",value:"1"},
          {label:"维修中",value:"2"},
          {label:"借出",value:"3"}
        ],

      }
    },
    components: {
      DeptSubMenu
    },
    created(){
      document.title=this.title;
      this.regionOptions = getRegion();
      this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);

      this.ongetAssetsList();

      let userInfo=JSON.parse(window.localStorage.getItem("userInfo"));
      this.repair_handler=userInfo.user_name;
      this.repair_handler_id=userInfo.user_id;
    },
    mounted(){
       
    },
    computed: {
      areaIds() {
        return extractAreaIds(this.regionOptSelected, this.regionOptions);
      },
      areaIds_zc() {
        return extractAreaIds(this.regionOptSelected_zc, this.regionOptions);
      },
    },
    watch: {
      areaIds_zc(val){
        this.admin_name="";
        this.dutyName="";
        this.dutyId="";
        this.ongetAdminForArea(val);
      }
    },
    filters:{
      property_status(val){
        let type={
          "0":"闲置中",
          "1":"在用",
          "2":"维修中",
          "3":"借出",
          "4":"报废"
        }
        return type[val];
      },
      out_warranty(val){
        let type={
          "0":"未过期",
          "1":"过期"
        }
        return type[val];
      }
    },
    methods:{
      ongetAdminForArea(area_id){
        getAdminForArea(area_id).then(response => {
          let res=response.data;
          this.admin_options=res;
        }).catch(error => {
          this.$message.error("拉取管理员列表失败！" + error.response.data.error_msg);
        })
      },
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
        this.ongetAssetsList();
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
        this.ongetAssetsList();
      },
      add(){
        this.$router.push({
          path:"assetStorageComonents",
          query:{
            type:"add"
          }
        })
      },
      info(id){
        this.$router.push({
          path:"assetStorageComonents",
          query:{
            type:"info",
            id:id
          }
        })
      },
      update(id){
        this.$router.push({
          path:"assetStorageComonents",
          query:{
            type:"update",
            id:id
          }
        })
      },
      handleCommand(command){
        let status=this.multipleSelection[0].property_status;//状态 0:闲置 1:在用 2:维修中 3:借出 4:报废
        this.list_wx=this.multipleSelection;
        if(command=="维修登记"){
          if(status==2){
            this.$message.info("该资产在维修中！不能进行当前操作！");
            return;
          }
          if(status==3){
            this.$message.info("该资产已经借出！不能进行当前操作！");
            return;
          }
          this.RepairDig=true;
        }else if(command=="打印资产标签"){
          if(this.multipleSelection.length==0){
            this.$message.info("请先勾选要打印的资产项！");
            return;
          }
          this.ongetTemplate();
        }else if(command=="信息变更"){
          this.update(this.multipleSelection[0].property_id);
        }else if(command=="资产借用"){
          if(status==2){
            this.$message.info("该资产在维修中！不能进行当前操作！");
            return;
          }
          if(status==3){
            this.$message.info("该资产已经借出！不能进行当前操作！");
            return;
          }
          this.BorrowDig=true;
        }else if(command=="资产归还"){
          if(status!==3){
            this.$message.info("只能在资产处于【借出】状态时可以进行当前操作！");
            return;
          }else{
            this.returnDig=true;
          }
        }else if(command=="资产领用"){
          if(status!==0){
            this.$message.info("只能在资产处于【闲置中】状态时可以进行当前操作！");
            return;
          }else{
            this.collarDig=true;
          }
        }else if(command=="资产退库"){
          if(status!==1){
            this.$message.info("只能在资产处于【在用】状态时可以进行当前操作！");
            return;
          }else{
            this.retiringDig=true;
          }
        }else if(command=="清理报废"){
          if(status!==0){
            this.$message.info("只能在资产处于【闲置中】状态时可以进行当前操作！");
            return;
          }else{
            this.clearDig=true;
          }
        }else if(command=="资产调拨"){
          if(status!==0){
            this.$message.info("只能在资产处于【闲置中】状态时可以进行当前操作！");
            return;
          }else{
            this.allocationDig=true;
          }
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        if(val.length>0){
          this.printBtn=false;
        }else{
          this.printBtn=true;
        }

        if(val.length==1){
          this.updateBtn=false;
          this.copyBtn=false;
          this.repairBtn=false;
          this.borrowBtn=false;
          this.returnBtn=false;
          this.collarBtn=false;
          this.retiringBtn=false;
          this.clearBtn=false;
          this.allocationBtn=false;
        }else{
          this.updateBtn=true;
          this.copyBtn=true;
          this.repairBtn=true;
          this.borrowBtn=true;
          this.returnBtn=true;
          this.collarBtn=true;
          this.retiringBtn=true;
          this.clearBtn=true;
          this.allocationBtn=true;
        }
      },
      search(){
        this.ongetAssetsList();
      },
      ongetTemplate(){//拉取标签模板规则
        let vm=this;
        const loading = vm.$loading({
          lock: true,
          text: '正在打印',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        getTemplate().then(response => {
          let res=response.data;
          vm.ptype=res.paper_type;
          vm.pheight=res.tag_height;
          vm.tag_used=res.tag_used;
          vm.pwidth=res.tag_width;

          vm.cardBox=Number(res.tag_width)*25+'px';
          vm.changePaper(vm.ptype);
          vm.show=true;
          setTimeout(function(){
            for(let i=0; i<vm.multipleSelection.length; i++){
              if(vm.tag_used==6){
                let qrcodes="qrcode"+i;
                new QRCode(qrcodes, {  
                  width: 100,  
                  height: 100, 
                  colorDark: "#000000",
                  colorLight: "#ffffff",
                  text: vm.multipleSelection[i].property_code,
                  render: 'canvas',
                  background: '#f0f',  
                  foreground: '#ff0'  
                }) 
              }else{
                let idS="#barcode"+i;
                JsBarcode(idS, vm.multipleSelection[i].property_code, {
                  textAlign: "center",
                  textPosition: "bottom",
                  background: "#f5f7fa",
                  font: "cursive",
                  fontOptions: "bold",
                  fontSize: 14,
                  textMargin: 0,
                  height: 50,
                  width: 1,
                  margin: 0
                });
              }
            }
            vm.getPdf("#print","标签文件");
            setTimeout(function(){
              vm.show=false;
            },1000);
            loading.close();
          },50);          
        }).catch(error => {
          vm.$message.error("拉取模板信息失败！" + error.response.data.error_msg);
        })
      },
      changePaper(val){
        if(val==1){
          this.col=24;
        }else if (val==2){
          this.col=12;
        }else{
          this.col=8
        }
      },
      ongetAssetsList(){
        let vm=this;
        let params={
          area_id:vm.areaIds,
          keyword:encodeURI(vm.kw),
          page_num:vm.page_num,
          page_size:vm.page_size,
          property_status:vm.assetStatusSelected,
        }
        vm.loading=true;
        getAssetsList(params).then(response => {
          let res=response.data;
          vm.list=res.rows;
          vm.page_size=res.page_size;
          vm.page_num=res.page_num;
          vm.total=res.total;
          vm.loading=false;
        }).catch(error =>{
          vm.loading=false;
          vm.$message.error("拉取资产列表失败！"+error.response.data.error_msg);
        })
      },
      copy(){
        let vm=this;
        addAssets(vm.multipleSelection[0]).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetAssetsList();
        }).catch(error => {
          vm.$message.error("执行失败！" + error.response.data.error_msg);
        })
      },
      onaddRepair(){//添加维修信息
        let vm=this;
        let params={
          "property_id": vm.list_wx[0].property_id,
          "repair_order": vm.repair_order,
          "repair_status": vm.repair_status,
          "repair_time": vm.repair_time,
          "repair_handler": vm.repair_handler,
          "repair_handler_id": vm.repair_handler_id,
          "repair_user": vm.repair_user,
          "repair_user_id": vm.repair_user_id,
          "repair_cost": Number(vm.repair_cost),
          "repair_content": vm.repair_content,
          "repair_note": vm.repair_note,
          "property_code": vm.list_wx[0].property_code,
          "property_spec": vm.list_wx[0].property_spec,
          "property_name": vm.list_wx[0].property_name,
          "area_id": vm.list_wx[0].area_id
        }
        addRepair(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetAssetsList();
          vm.RepairDig=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onaddBorrow(){//添加借用信息
        let vm=this;
        let params={
          "property_id": vm.list_wx[0].property_id,
          "lend_no": vm.borrow_order,
          "lend_time": vm.borrow_time,
          "expect_return_time":vm.return_time,
          "user_name": vm.borrow_user,
          "user_id": Number(vm.borrow_user_id),
          "lend_note": vm.borrow_note,
          "property_code": vm.list_wx[0].property_code,
          "property_spec": vm.list_wx[0].property_spec,
          "property_name": vm.list_wx[0].property_name,
          "area_id": vm.list_wx[0].area_id
        }
        lendAsset(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetAssetsList();
          vm.BorrowDig=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onaddReturn(){//添加归还信息
        let vm=this;
        let params={
          "property_id": vm.list_wx[0].property_id,
          "actual_return_time":vm.return_return_time,
          "return_note": vm.return_note,
        }
        backAsset(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetAssetsList();
          vm.returnDig=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onaddCollar(){//添加领用信息
        let vm=this;
        let params={
          "property_id": vm.list_wx[0].property_id,
          "receive_no": vm.collar_order,
          "receive_date": vm.collar_time,
          "user_name": vm.collar_user,
          "user_id": vm.collar_user_id,
          "receive_loc": vm.collar_content,
          "receive_note": vm.collar_note,
          "dept_name":vm.collar_department,
          "dept_id":vm.dept_info.id,
          "property_code": vm.list_wx[0].property_code,
          "property_spec": vm.list_wx[0].property_spec,
          "property_name": vm.list_wx[0].property_name,
          "area_id": vm.list_wx[0].area_id
        }
        inAsset(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetAssetsList();
          vm.collarDig=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onaddRetiring(){//添加退库信息
        let vm=this;
        let params={
          "property_id": vm.list_wx[0].property_id,
          "receive_no": vm.retiring_order,
          "receive_date": vm.retiring_time,
          "receive_loc": vm.retiring_content,
          "receive_note": vm.retiring_note,
          "property_code": vm.list_wx[0].property_code,
          "property_spec": vm.list_wx[0].property_spec,
          "property_name": vm.list_wx[0].property_name,
          "area_id": vm.list_wx[0].area_id,
          "dept_id": vm.list_wx[0].dept_id,
          "dept_name": vm.list_wx[0].dept_name,
          "user_id": vm.list_wx[0].user_id,
          "user_name": vm.list_wx[0].user_name
        }
        outAsset(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetAssetsList();
          vm.retiringDig=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onaddClear(){//添加清理报废信息
        let vm=this;
        let params={
          "property_id": vm.list_wx[0].property_id,
          "invalid_no": vm.clear_order,
          "invalid_time": vm.clear_time,
          "invalid_note": vm.clear_note,
          "property_code": vm.list_wx[0].property_code,
          "property_spec": vm.list_wx[0].property_spec,
          "property_name": vm.list_wx[0].property_name,
          "area_id": vm.list_wx[0].area_id
        }
        invalidAsset(params,1).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetAssetsList();
          vm.clearDig=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onaddAllocation(){//添加调拨信息
        let vm=this;
        let params={
          "property_id": vm.list_wx[0].property_id,
          "in_area_id": Number(vm.areaIds_zc),
          "out_time": vm.allocation_time,
          "transfer_note": vm.allocation_note,
          "out_admin_name": vm.list_wx[0].admin_name,
          "out_admin_id": vm.list_wx[0].admin_id,
          "in_admin_id": Number(vm.allocation_admin_name.split("-")[0]),
          "in_admin_name": vm.allocation_admin_name.split("-")[1],
          "property_code": vm.list_wx[0].property_code,
          "property_spec": vm.list_wx[0].property_spec,
          "property_name": vm.list_wx[0].property_name,
          "out_area_id": vm.list_wx[0].area_id,
          "out_area_name": vm.list_wx[0].area_name,
          "transfer_no":vm.allocation_order
        }
        transferAsset(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetAssetsList();
          vm.allocationDig=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      handleClose(done) {
        return;
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
      fetchStaff() {//获取人员列表
        let vm = this;
        this.dutyDlgListLoading = true;
        let params = {
          kw:vm.kw_p,
          is_fuzzy:true,
          page_num: 1,
          page_size: 10000,
          ril: 'S',
          area_id:vm.areaIds,
        };
        getStaffList(params)
        .then(response => {
          vm.dutyDlgList = response.data.rows;
          vm.dutyDlgListLoading = false;
        })
        .catch(error => {
          vm.dutyDlgListLoading = false;
        })
      },
      onChange(a,b,c){
        let vm=this;
        if(b){
          vm.$refs.dutyDlg.setCheckedKeys([]);
          vm.$refs.dutyDlg.setCheckedKeys([a.staff_id]);
        }else{
          vm.$refs.dutyDlg.setCheckedKeys([]);
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`联系方式：${node.data.phone}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `${node.data.dept_name}`
            )
          ]
        );
      },
      fetchDept() {
        let vm = this;
        vm.deptLoading = true;
        getDeptInfo().then(response => {
          let res = response.data;
          vm.deptList = res;
          vm.deptLoading = false;
        })
        .catch(error => {
          vm.deptLoading = false;
        })
      },
      handleDeptDlgClick() {
        let str = this.deptSelected.split('-');
        let deptInfo={
          "id":str[0],
          "name":str[1]
        } 
        this.dept_info = deptInfo;
        this.collar_department= str[1];
        this.deptDialogVisible = false;
      },
      handleDeptSelect(key, keyPath) {
        this.deptSelected = key;
      },
      onSearch(){
        this.fetchStaff();
      },
      showRepairDig(){
        this.newRoleDialogVisible=true;
        this.fetchStaff();
      },
      showBorrowDig(){
        this.newBorrowDialogVisible=true;
        this.fetchStaff();
      }, 
      showCollarDig(){
        this.newCollarDialogVisible=true;
        this.fetchStaff();
      },
      showDeptDig(){
        this.deptDialogVisible = true;
        this.fetchDept();
      },
      onAssignSub(){//确认报修人
        let vm=this;
        var duty = vm.$refs.dutyDlg.getCheckedNodes();
        if (duty.length > 0) {
          vm.repair_user = duty[0].user_name;
          vm.repair_user_id = duty[0].staff_id;
        }else{
          vm.repair_user = '';
          vm.repair_user_id = '';
        }    
        vm.newRoleDialogVisible = false;
      },
      onBorrowAssignSub(){//确认借用人
        let vm=this;
        var duty = vm.$refs.dutyDlg.getCheckedNodes();
        if (duty.length > 0) {
          vm.borrow_user = duty[0].user_name;
          vm.borrow_user_id = duty[0].staff_id;
        }else{
          vm.borrow_user = '';
          vm.borrow_user_id = '';
        }    
        vm.newBorrowDialogVisible = false;
      },
      onCollarAssignSub(){//确认领用人
        let vm=this;
        var duty = vm.$refs.dutyDlg.getCheckedNodes();
        if (duty.length > 0) {
          vm.collar_user = duty[0].user_name;
          vm.collar_user_id = duty[0].staff_id;
        }else{
          vm.collar_user = '';
          vm.collar_user_id = '';
        }    
        vm.newCollarDialogVisible = false;
      }
      
    }
}
</script>

